<script>
import { ref } from 'vue'
import axios from "axios";
export default {
  props:{
    Followed:{},
    pageID:{}
  },
  mounted() {
    const userData = JSON.parse(sessionStorage.getItem('token'));
    axios.defaults.headers.common['Authorization'] = `${userData.token}`;
    this.isFollowed = this.$props.Followed;

  },
  data(){
    return{
      isFollowed:ref(true),
    }
  },
  methods:{
    changeHandle(){
      if(this.isFollowed === false){
        axios.post('http://localhost:8080/focus/add', {
          "FocusID": Number(this.$props.pageID)
        });
      }
      else{
        axios.post('http://localhost:8080/focus/delete', {
          "FocusID": Number(this.$props.pageID)
        });
      }
      this.isFollowed = !this.isFollowed;
    }
  }
}
</script>

<template>
  <span class="rounded-box"
        @click="changeHandle"
        :style="{backgroundColor: this.isFollowed ? '#A6A6A6' : '#FFD466',
                 borderColor: this.isFollowed ? '#A6A6A6' : '#FFD466'}">
          {{isFollowed ? '已关注' : '关 注'}}
  </span>
</template>

<style scoped>
.rounded-box {
  width:80px;
  height:25px;
  font-size: 18px;
  font-weight: bold;
  border: 2px solid #FFD466; /* 边框颜色 */
  border-radius: 15px; /* 圆角弧度 */
  padding: 10px; /* 内边距 */
  text-align: center; /* 文字居中 */

  color:white;
  margin-top: 50px;
  margin-left: auto;
  margin-right:80px;
}
.rounded-box:hover{
  cursor: pointer;
}
</style>